<template>
    <u-index-plugins url="/plugins/miaosha/advance/advance">
        <template v-slot:u-top-name>
            <view class="cross-center u-plugin-top">
                <view class="u-plugin-icon" :style="{'background-color': theme.background,'background-image': 'url('+appImg.icon_home_miaosha+')'}"></view>
                <template v-if="newData.open_date">
                    <view :class="timer ? 'box-grow-0' : 'box-grow-1'">{{newData.str}}</view>
                    <view class="box-grow-1 dir-left-nowrap u-time-box" v-if="timer">
                        <view class="main-center cross-center u-time">{{timer.hour}}</view>
                        <view class="main-center cross-center u-symbol">:</view>
                        <view class="main-center cross-center u-time">{{timer.min}}</view>
                        <view class="main-center cross-center u-symbol">:</view>
                        <view class="main-center cross-center u-time">{{timer.sec}}</view>
                    </view>
                </template>
            </view>
        </template>
        <template v-slot:u-body>
            <view class="scroll-list" :class="style === '2' ? 'main-between two-list':'dir-left-nowrap'">
                <app-goods
                  v-for="(goods,idx) in goodsList" :key="goods.id"
                  :index="idx"
                  :showTag="false"
                  :theme="theme"
                  :goods="goods"
                  :c_border_top="16"
                  :isIndex="true"
                  :scrollWidth="304"
                  :isUnderLinePrice="true"
                  :showBuyBtn="false"
                  :padding="48"
                  :listStyle="0">
                  </app-goods>
            </view>
        </template>
    </u-index-plugins>
</template>

<script>
import {mapGetters, mapState} from 'vuex';
import uIndexPlugins from '../u-index-plugins/u-index-plugins.vue';
import appGoods from '../../basic-component/app-goods/app-goods.vue';

export default {
    name: "u-miaosha",
    props: {
        value: {
            type: Object,
            default() {
                return {
                    open_date: null,
                    list: []
                };
            }
        },
        pageHide: Boolean,
        theme: Object,
        index: Number,
        page_id: Number,
        is_required: Boolean,
        appImg: {
            type: Object,
            default: function() {
                return {
                    plugins_out: ''
                }
            }
        },
        appSetting: {
            type: Object,
            default: function() {
                return {
                    is_show_stock: 1,
                    sell_out_pic: '',
                    is_use_stock: 1
                }
            }
        }
    },
    data() {
        return {
            style: '1',
            goods_num: 20,
            newData: {
            },
            timer: null,
            time: null,
            is_vip: true,
            tempList: [],
            goodsList: [],
            timeOut: 0
        };
    },
    components: {
        uIndexPlugins,
        appGoods
    },
    computed: {
        ...mapGetters('mallConfig', {
            getTheme: 'getTheme',
        })
    },
    beforeDestroy() {
        clearInterval(this.time);
        clearTimeout(this.timeOut);

    },
    watch: {
        pageHide: {
            handler(v) {
                if (v) {
                    clearInterval(this.time);
                    clearTimeout(this.timeOut);
                    return ;
                }

            },
            immediate: true
        },
        'newData': {
            handler(newVal) {
                if (this.$validation.isEmpty(newVal)) return;
                this.tempList = this.cloneData(newVal.list);
                this.splitData();
            },
            immediate: true
        }
    },
    methods: {
        loadData() {
            let para = {
                type: this.page_id === 0 ? 'mall' : 'diy',
                key: 'miaosha',
                page_id: this.page_id,
                index: this.index
            }
            if(this.goods_num) {
                para.goods_num = this.goods_num
            }
            this.$request({
                url: this.$api.index.extra,
                data: para
            }).then(e => {
                if (e.code === 0 && e.data) {
                    this.newData = e.data;
                    this.newData.str = '00:00:00 点场';
                    let timenow = new Date();//获取当前时间
                    if ((new Date(this.newData.open_date)).getDate() != timenow.getDate()) {
                        this.newData.str = '预告 ' + this.newData.open_date + ' ' + this.newData.open_time + '点场';
                    } else if (this.newData.open_time != timenow.getHours()) {
                        this.newData.str = '预告 ' + this.newData.open_time + '点场';
                    } else {
                        let timelog = this.newData.date_time * 1000 - timenow.getTime();//时间差的所有毫秒数
                        this.time = setInterval(() => {
                            timelog -= 1000;
                            this.newData.str = this.newData.open_time + '点场';
                            if (timelog <= 0) {
                                clearInterval(this.time);
                                return;
                            }
                            let hour = parseInt((timelog / 1000 / 60 / 60));
                            let min = parseInt((timelog / 1000 / 60) % 60);
                            let sec = parseInt((timelog / 1000) % 60);
                            this.timer = {
                                hour: hour < 10 ? "0" + hour : hour,
                                min: min < 10 ? "0" + min : min,
                                sec: sec < 10 ? "0" + sec : sec
                            };
                        }, 1000);
                    }
                }
            })
        },
        // 复制而不是引用对象和数组
        cloneData(data) {
            return JSON.parse(JSON.stringify(data));
        },
        // 循环载入
        splitData() {
            if (!this.tempList.length) return;
            let item = this.tempList[0];
            this.goodsList.push(item);
            this.tempList.splice(0, 1);
            if (this.tempList.length) {
                this.timeOut = setTimeout(() => {
                    this.splitData();
                }, 200);
            }
        },
    },

    mounted() {
        let storage = this.$storage.getStorageSync('INDEX_MALL');
        this.style = storage.home_pages[this.index].style;
        this.goods_num = storage.home_pages[this.index].goods_num;
        this.loadData();
    }
}
</script>

<style scoped lang="scss">
    @import url('./index.scss');
    .u-time-box {
        margin-left: #{23rpx};
    }
    .u-symbol {
        width: 20upx;
        height: 34upx;
    }
    .u-time {
        padding: 0 8rpx;
        height: #{40rpx};
        background-color: #666666;
        color: #ffffff;
        font-size: #{28rpx};
        border-radius: #{4rpx};
    }
</style>